<template>
	<div class="app-nav-top">
	  <b-navbar class="my-nav-bar" fixed="top">
	    <b-navbar-brand class="my-navbar-brand">
			<b-icon icon="gear-wide-connected"></b-icon>
			<span>AntCMS</span>
			<b-icon 
				class="menu-opt-icons" 
				@click.stop.prevent="openOrCloseMenu" 
				:icon="iconName"></b-icon>
		</b-navbar-brand>
	    <!-- Right aligned nav items -->
	    <b-navbar-nav class="ml-auto my-navbar-nav">
	      <b-nav-item-dropdown class="my-nav-item" offset="250" right>
	        <!-- Using 'button-content' slot -->
	        <template v-slot:button-content>
				<b-icon-person-circle></b-icon-person-circle>
	        </template>
	        <b-dropdown-item href="#">个人资料</b-dropdown-item>
	        <b-dropdown-item href="#">退出</b-dropdown-item>
	      </b-nav-item-dropdown>
	    </b-navbar-nav>
	  </b-navbar>
	</div>
</template>

<script>
	export default {
		name: "app-nav",
		data: function(){
			return {
				iconName: "box-arrow-in-left"
			}
		},
		methods:{
			openOrCloseMenu: function(){
				if (this.iconName === 'box-arrow-in-left') {
					this.iconName = 'box-arrow-in-right'
					this.$store.commit('menuOpr', 'close')
				}else{
					this.iconName = 'box-arrow-in-left'
					this.$store.commit('menuOpr', 'open')
				}
			}
		}
	}
</script>

<style>
	.menu-opt-icons{
		margin-left: 3.125rem;
	}
	.my-nav-bar {
		background-color: #23282d !important;
		height: 2rem;
	}
	.my-navbar-brand, .my-navbar-toggle, .my-navbar-nav > .my-nav-item > a.nav-link {
		color: white!important;
		font-size: 0.8125rem!important;
	}
	.my-navbar-brand > span {
		margin-left: 0.3125rem;
	}
	.app-nav-top {
		height: 2rem;
	}
</style>
